<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
   <title>登录[[${projectName}]]</title>
    <meta name="description" content="[[${projectName}]]">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
     <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../static/js/plugins/layui-v2.5.4/css/layui.css" th:href="@{/js/plugins/layui-v2.5.4/css/layui.css}" rel="stylesheet" />
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/xscrum/css/x-ui.css" th:href="@{/xscrum/css/x-ui.css?v=4.1.0}" rel="stylesheet"/>
   
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
<style>
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden
}

body {
	/* background: #009688; */
	background: #1c84c6;
}

body:after {
	content: '';
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.layui-container {
	width: 100%;
	height: 100%;
	overflow: hidden
}

.admin-login-background {
	width: 360px;
	height: 350px;
	position: absolute;
	left: 40%;
	top: 40%;
	margin-left: -180px;
	margin-top: -100px;
}

.logo-title {
	text-align: center;
	letter-spacing: 2px;
	padding: 14px 0;
}

.logo-title h1 {
	color: #009688;
	font-size: 25px;
	font-weight: bold;
}

.login-form {
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	padding: 14px 20px;
}

.login-form .layui-form-item {
	position: relative;
}

.login-form .layui-form-item label {
	position: absolute;
	left: 1px;
	top: 1px;
	width: 38px;
	line-height: 36px;
	text-align: center;
	color: #d2d2d2;
}

.login-form .layui-form-item input {
	padding-left: 36px;
}

.captcha {
	width: 60%;
	display: inline-block;
}

.captcha-img {
	display: inline-block;
	width: 34%;
	float: right;
}

.captcha-img #captchaImage {
	height: 34px;
	border: 1px solid #e6e6e6;
	height: 36px;
	width: 100%;
}

#login-div {
	position: relative;
	width: 710px;
	height: 288px;
	background-color: #fff;
	background-image: url('/img/loginimg1.png');
	background-repeat: no-repeat;
	background-position: left;
}

#login-img {
	position: absolute;
	float: right;
}

#form-div {
	position: absolute;
	margin-left: 57%;
	height: 288px;
}

span {
	display: block;
}

#login-img #form-div {
	margin-top: 20px;
}

.login-font {
	font-size: 42px;
	font-family:"华文行楷";
	color: white;
	width:710px;
}

.login-logo {
	position: relative;
	margin: 0 0 15px 0;
}

#login-f {
	font-size: 22px;
}

#fooder {
	position: absolute;
	margin-top: 310px;
	color: white;
	width:710px;
}

</style>
</head>
<body>
	<div class="layui-container">
		<div class="admin-login-background">
			<div class="login-logo">
				<span class="login-font">
					[[${projectName}]]
				</span>
			</div>
			<div id="login-div">
				<div id="form-div" class="layui-form login-form">
					<form id="signupForm" class="layui-form">
						<div id="login-f" class="layui-form-item">登录</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-username" for="username"></label>
							<input type="text" name="username" class="form-control uname" value="admin"
								placeholder="用户名" />
						</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-password" for="password"></label>
							<input type="password" name="password" class="form-control pword" value="123456"
								placeholder="密码" />
						</div>
						<div class="layui-form-item" th:if="${captchaEnabled==true}">
							<label class="layui-icon layui-icon-vercode" for="captcha"></label>
							<input type="text" name="validateCode" id="validateCode"
								placeholder="图形验证码" autocomplete="off"
								class="layui-input verification captcha">
							<div class="captcha-img">
								<a href="javascript:void(0);" rel="external nofollow"
									title="点击更换验证码"> <img id="captchaImage"
									th:src="@{captcha/captchaImage(type=${captchaType})}"
									class="imgcode" width="85%" alt="更换验证码" />
								</a>
							</div>
						</div>
						<div class="layui-form-item"
							th:classappend="${captchaEnabled==false} ? 'm-t'">
							<input type="checkbox" name="rememberMe" value="true"
								lay-skin="primary" title="记住密码">
						</div>
						<div class="layui-form-item">
							<button class="btn btn-success btn-block" id="btnSubmit"
								data-loading="正在验证登录，请稍后...">登录</button>
						</div>
					</form>
				</div>
				<div id="fooder">
					<p id="fooder-font">欢迎来到由Traffic System Team研发的智慧交通后台管理系统，有问题请联系TST，联系电话：xxxxxxxxxx</p>
				</div>
			</div>
		</div>
	</div>

	<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
    <!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <!--[if lt IE 9]>
    	<script src="../static/js/jquery-1.9.1.min.js" th:src="@{/js/jquery-1.9.1.min.js}"></script>
     <![endif]-->
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/js/plugins/jq-module/jquery.particleground.min.js" th:src="@{/js/plugins/jq-module/jquery.particleground.min.js}"></script>
<script src="../static/xscrum/js/x-ui.js" th:src="@{/xscrum/js/x-ui.js?v=4.1.0}"></script>
    <script src="../static/js/Browser.js" th:src="@{/js/Browser.js}"></script>
    
<script src="../static/xscrum/login.js" th:src="@{/xscrum/login.js}"></script> 

<script type="text/javascript">
    // 粒子线条背景
    $(document).ready(function() {
        $('.layui-container').particleground({
            dotColor : '#5cbdaa',
            lineColor : '#5cbdaa'
        });
        /*
        var info = new Browser();
        var compatible="[[${browser}]]";
        var browserUrl = getArr("[[${browserUrl}]]");
        if(compatible.indexOf(info.browser) == -1){
        	 layer.open({
        	        type: 1
        	        ,title: false //不显示标题栏
        	        ,closeBtn: false
        	        ,area: '300px;'
        	        ,shade: 0.8
        	        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
        	        ,btn: getArr("[[${browserName}]]")
        	        ,btnAlign: 'l'
        	        ,moveType: 1 //拖拽模式，0或者1
        	        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+
        	        '非常抱歉暂时不支持当前浏览器，我们会努力兼容该浏览器的，目前支持以下浏览器，请点击下载后访问。</div>'
        	        ,success: function(layero){
        	          var btn = layero.find('.layui-layer-btn');
        	          for(var i=0;i<browserUrl.length;i++){
        	        	  btn.find('.layui-layer-btn'+i).attr({
              	            href: browserUrl[i]
              	          });
        	          }
        	        }
        	      });
        }
        */
		/* alert("浏览器："+info.browser+
				";版本："+info.version+
				";内核："+info.engine+
				";操作系统："+info.os+' '+info.osVersion+
				";设备："+info.device+
				";语言："+info.language); */
    });
    
    function getArr(str){
    	str = str.substring(str.indexOf("[")+1,str.indexOf("]"));
        arr = str.split(",");
        return arr;
    }
</script>

</body>
</html>